<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            outline: 0;
        }
        #head{
            display: none;
        }
        img{
            width:120px;
            height: 120px;
        }
    </style>
    <script>    
        window.onload=function(){
            var btn=document.getElementById("btn");

            //鼠标事件
            // btn.onclick=function(){//鼠标点击事件
            // btn.ondblclick=function(){//鼠标双击事件
            // btn.onmouseover=function(){//鼠标悬浮事件
            // btn.onmouseout=function(){//鼠标离开事件
            // btn.onmousedown=function(){//鼠标按钮被按下
            // btn.onmouseup=function(){//鼠标按键被松开
            // btn.onmousemove=function(){//鼠标移动事件
            btn.oncontextmenu=function(){//鼠标右击
                console.log("鼠标事件");
            };


            var username=document.getElementById("username");

            // 键盘事件
            // 执行顺序：先keydown--->keypress--->keyup
            username.onkeydown=function(e){
                // console.log(e.keyCode);//按键码
                if(e.keyCode==13){
                    console.log("您按下了回车键");
                }

                console.log("按键被按下");
            };
            username.onkeypress=function(){
                console.log("按键被按压");
            };
            username.onkeyup=function(){
                console.log("按键被松开");
            };

            //表单事件
            username.onfocus=function(){//获得焦点事件
                username.style.border="3px solid red";
            };
            username.onblur=function(){//失去焦点事件
                username.style.border="4px double green";
            };

            var biancheng=document.getElementById("biancheng");
            biancheng.onchange=function(){
                console.log(this.checked);
            };

            var city=document.getElementById("city");
            city.onchange=function(){//选项内容发生改变的时候触发的事件
                console.log("触发了事件");
            };

            var head=document.getElementById("head");
            head.onchange=function(){
                // console.log(this.files[0]);//获取选择的文件数据
                document.getElementById("logo").src=window.URL.createObjectURL(this.files[0]);
            };

            document.getElementById("email").onselect=function(){//选中文本内容的时候触发的事件
                this.style.border="3px solid red";
            };
            document.getElementById("myForm").onsubmit=function(){//表单提交事件
                var email=document.getElementById("email").value;
                if(email==""){
                    return false;//返回false，阻止表单提交
                }
                return true;
            };
        };
    </script>
</head>
<body>
    <form action="success.html" id="myForm">
        <input type="button" value="点我呀" id="btn">
        <br>
        用户名:<input type="text" id="username">
        <br>
        爱好：
            <input type="checkbox" name="hobby" id="biancheng" value="编程">
            <label for="biancheng">编程</label>
        <br>
        选择你想去的城市：
        <select  id="city">
            <option value="nanjing">南京</option>
            <option value="henan">河南</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
        </select>
        <br>
        头像:<input type="file" id="head">
        <label for="head">
            <img src="images/tou.jpg" alt="" id="logo">
        </label>
        <br>
        邮箱:
        <input type="text" id="email" value="245798@qq.com" name="email">
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>